/*
* @Author: 董洌淇
* @Date: 2022年6月12日16:47:17
* @Last Modified by: 董洌淇
* @Last Modified time: 2022年6月12日16:47:25
* @Description: 告警主页面
*/
<template>
	<view class="alarm-box">
		<cu-custom bgColor="bg-blue" :isBack="true"><block slot="backText"></block><block slot="content">今日报警列表</block></cu-custom>
		<view class="alarm-content bg-white padding flex flex-space-between">
			<button class="cu-btn xm" v-for="(item, index) in alarmTypeList" :key="index" :class="btnIndex === index ? 'bg-blue' : ''" @click="changeAlarmFn(item, index)">
				{{ item.label }}
			</button>
		</view>
		<view class="bg-white padding margin-top-sm">
			<mosowe-text-scroll-row :list="list" delay="1000" :actives="chooseList" initPosition="right" @change="chooseThis1"></mosowe-text-scroll-row>
			<view class="flex flex-space-between radius">
				<view class="cart-box padding radius angle-first">
					<text class="font-size-32upx font-weight-600 text-red">65次</text>
					<text class="padding-top-xs">超标报警</text>
				</view>
				<view class="cart-box padding radius angle-last">
					<text class="font-size-32upx font-weight-600 text-yellow">0次</text>
					<text class="padding-top-xs">异常报警</text>
				</view>
			</view>
		</view>
		<view class="bg-white padding margin-top-sm font-weight-600">
				涉及污染物：
				<text class="text-red">COD，氨氮</text>
		</view>
		<cartTemplate class="margin-top-sm" :alarmCartList="pollutantsList"></cartTemplate>
		<view class="cu-load load-modal" v-if="loadModal">
			<image src="/static/appicon-72.png" mode="aspectFit"></image> 
			<view class="gray-text">加载中...</view>
		</view>
	</view> 
</template>

<script>
	import { alarmTypeList } from'./config.js'
	import cartTemplate from './components/cartTemplate.vue'
	export default {
		components: { cartTemplate },
		data() {
			return {
				loadModal: false,
				alarmTypeList: alarmTypeList,
				btnIndex: 0,
				chooseList: [],
				list: ['多抽时间陪陪父母和家人', '无病无灾，亲友安康', '向女神/男神告白', '工资翻倍，工作不累', '每月看完一本书', '准点上班，按时下班'],
				pollutantsList: [
					{
						name: '入河排口（马坊桥西污水处理排放口）',
						pollutantsName: 'COD',
						excessivePeriodOfTime: '00:00-15:32',
						alarmTime: '2022-05-23 15:00:00',
						firstTime: '2022-05-23 12:00:10',
						total: 12,
						type: 1
					},
					{
						name: '入河排口（倪家桥污水处理排放口）',
						pollutantsName: '氨氮',
						excessivePeriodOfTime: '10:00-15:32',
						alarmTime: '2022-05-23 15:00:00',
						firstTime: '2022-05-23 12:00:10',
						total: 2,
						type: 2
					}
				]
			}
		},
		methods: {
			// 点击告警类型
			changeAlarmFn (data, index) {
				this.btnIndex = index
				console.log(data, '告警类型')
			},
			// 滚动
			chooseThis1(data) {
				if (!this.chooseList.includes(data)) {
					this.chooseList.push(data);
				} else {
					this.chooseList.splice(this.chooseList.indexOf(data), 1);
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.alarm-box {
		.cart-box {
			border: 2upx solid #F4F4F4;
			box-shadow: 0 0 5px #ECECEE;
			width: 48%;
			text {
				display: block;
			}
		}
		.angle-first {
			background: url(@/static/images/angle2.png) no-repeat right top;
		}
		.angle-last {
			background: url(@/static/images/angle1.png) no-repeat right top;
		}
	}
</style>
